<template>
  <div class="home">
    <div id="cesium-container" />
    <div class="custom-panel"></div>
    <input type="file" accept=".kml" class="file" style="display: none;">
    <!-- <button class="test-btn" @click="testClick">test</button> -->
  </div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";
import { GController } from '@/utils/Controller'
import CesiumTdt from '@/utils/CesiumTdt'
import ProviderBing from '@/utils/ProviderBing'
import MVTService from '@/utils/MVTService'
import S3MService from '@/utils/S3MService'
import MapStyle from '@/utils/MapStyle'
import HandlerTool from '@/utils/HandlerTool'
import ScreenEvent from '@/utils/ScreenEvent'
import DrawPoint from '@/utils/DrawPoint'
import DrawLine from '@/utils/DrawLine'
import DrawPolygon from '@/utils/DrawPolygon'
import DrawMarker from '@/utils/DrawMarker'
import CustomPanel from '@/utils/CustomPanel'
import CesiumBox from '@/utils/CesiumBox'
import LightSource from '@/utils/LightSource'
import CesiumEcharts from '@/utils/CesiumEcharts/index'
// import {init, drawLine, handleEdit, handleSaveClick, handleOpenClick, clean} from '@/utils/KmlLine'
import { init, drawPolygon, handleEdit, handleSaveClick, handleOpenClick, clean} from "@/utils/KmlPolygon"
import options from '@/utils/CesiumEcharts/options.json'
import { initThree, createMesh, renderThree } from "@/utils/ThreeJs/index.ts"

// 设置全局cesium对象
let viewer = null;

// three全局对象
let three = {
  renderer: null,
  camera: null,
  scene: null,
};
// three.js物体
let objects3D = [];

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYmU2OGRmZC03OWEzLTRlNTktOWRmOS1hMDEwMzg0MjkyYWEiLCJpZCI6MTI5MTE1LCJpYXQiOjE2NzkwMTkwODF9.7oRAI9dAOsNH0hIpRJJhpgl_WBCjZg2V__d4MJ8VOAA";

let PointSource = new Cesium.CustomDataSource('PointSource')
let LineSource = new Cesium.CustomDataSource('LineSource')
let PolygonSource = new Cesium.CustomDataSource('PolygonSource')
let MarkerSource = new Cesium.CustomDataSource('MarkerSource')
let PanelSource = new Cesium.CustomDataSource('PanelSource')

let GHandlerTool = null;
let GDrawPoint = null;
let GDrawLine = null;
let GDrawPolygon = null;
let GDrawMarker = null;

const testClick = () => {
  // GDrawPoint.endDrawPointEventHandler();
  // GDrawLine.endDrawLine();
  // GDrawPolygon.endDrawPolygon();
  // GDrawLine.clearAllEntitiesHandler('1')
  handleOpenClick()
}

onMounted(async() => {
  // 初始化
  viewer = GController.init({
    shouldAnimate: true,
    selectionIndicator:true,
    infoBox:false
  });

  viewer.dataSources.add(PointSource);
  viewer.dataSources.add(LineSource);
  viewer.dataSources.add(PolygonSource);
  viewer.dataSources.add(MarkerSource);

  // 将三维球定位到中国
  // GController.flyTo();

  // 加载天地图图层
  const GCesiumTdt = new CesiumTdt(viewer)

  // 加载Bing地图 SuperMap地形服务
  const GProviderBing = new ProviderBing(viewer)
  GProviderBing.setMapStyleByBingMapHandler();

  GCesiumTdt.add_iboMap();
  // GCesiumTdt.add_terrain();
  GCesiumTdt.add_wtfs();

  // 添加MVT图层
  // const GMVTService = new MVTService(viewer);
  // GMVTService.init();

  // 添加S3M服务
  const GS3MService = new S3MService(viewer);
  const promise = GS3MService.initSceneOpen();
  GS3MService.setMouseTypeWhenMouseMoveHandler(promise);

  // const GMapStyle = new MapStyle(viewer);
  // 底图颜色相关色调透明度设置
  // GMapStyle.setImagery({
  //   brightness:1,
  //   contrast:1,
  //   hue:1,
  //   saturation:1,
  //   gamma:1,
  //   alpha:1,
  // })
  // 修改模型颜色
  // GMapStyle.setLayer({alpha:1}, promise)
  // 场景颜色设置和校正
  // GMapStyle.setCorrection({brightness:0.02,contrast:0.02,hue:0.02,saturation:0.02}, promise)
  // 场景泛光设置
  // GMapStyle.setBloomEffect({threshold:1,bloomIntensity:1}, promise)

  GHandlerTool = new HandlerTool(viewer);
  GHandlerTool.init();
  
  // 绑定鼠标事件
  const GScreenEvent = new ScreenEvent(viewer);
  // GScreenEvent.screenSpaceEventHandler('LEFT_CLICK',(e)=>{
  //   console.log(
  //     viewer.scene.pick(e.position), //模型数据
  //     viewer.scene.pickPosition(e.position) // 地图数据
  //   );
  // })

  // 绘制点
  GDrawPoint = new DrawPoint(viewer,PointSource);
  // GDrawPoint.readyDrawPointHandler();
  // GDrawPoint.startDrawPoint();
  // GDrawPoint.initDrawPointEventHandler()

  // 绘制线
  GDrawLine = new DrawLine(viewer,LineSource);
  // GDrawLine.readyDrawLineHandler();
  // GDrawLine.startDrawLine();
  GDrawLine.drawFlowingLineHandler(
    '1',
    'test',
    [50, -10, 500000, 140, -10, 500000],
    '#2c78bb',
    3000
  );

  // 绘制面
  GDrawPolygon = new DrawPolygon(viewer,PolygonSource);
  // GDrawPolygon.readyDrawPolygonHandler();
  // GDrawPolygon.startDrawPolygon();
  // GDrawPolygon.readyDraw3DPolygonHandler();
  // GDrawPolygon.startDraw3DPolygon();


  // 绘制marker
  GDrawMarker = new DrawMarker(viewer, MarkerSource);
  // GDrawMarker.readyDrawMarkerHandler();
  // GDrawMarker.steatDrawMarker();
  // GDrawMarker.drawMarkerHandler(
  //   '1',
  //   'Marker',
  //   {
  //     x: -2178884.2588507165,
  //     y: 4380489.951025078,
  //     z: 4092100.784970068,
  //   });

  let Panel = document.getElementsByClassName('custom-panel')[0];
  const GCustomPanel = new CustomPanel(viewer,PanelSource);
  // GCustomPanel.init(Panel)

  // const GCesiumBox = new CesiumBox(viewer);
  // GCesiumBox.initCreateSkyBoxHandler();

  // init(viewer)
  // drawLine(handleEdit)
  // init(viewer)
  // drawPolygon(handleEdit)

  // const GCesiumEcharts = new CesiumEcharts(viewer);
  // GCesiumEcharts.init(options);
  const GLightSource = new LightSource(viewer);
  GLightSource.addPointLightHandler({
    "x": -2179199.5050662775,
    "y": 4380926.716834282,
    "z": 4091573.7547322484
  })

  // 初始化Three
  initThree(three, document.getElementById('cesium-container'))
  createMesh(three, objects3D)
  renderThree(three, objects3D, viewer, document.getElementById('cesium-container'))

  //循环函数，不断请求动画帧渲染
  function loop() {
    requestAnimationFrame(loop);
    // cesium渲染
    viewer.render();
    // three.js渲染
    renderThree(three, objects3D, viewer, document.getElementById('cesium-container'));
  }
  loop();
});
</script>

<style>
.home {
  width: 100vw;
  height: 100vh;
}
.test-btn {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
}
.custom-panel {
  position: fixed;
  left: -1000px;
  top: -1000px;
  z-index: 1;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  display: none;
  background-color: #fff;
}
</style>
